import { List, Stepper, Button, SpinLoading } from "antd-mobile-v5";
import React, { useState, FunctionComponent, ComponentType } from "react";
import './index.less';

export interface IPageRefreshData<T> {
    total: number;
    data: T[],
}

interface IPageRefreshProps<T> {
    pageSize?: number;
    renderItem: (item: T, index: number) => React.ReactNode;
    func: (params: { pageNo: number, pageSize: number }) => Promise<IPageRefreshData<T>>
}


export interface pageRefresh<T> {
    total: number;
    next: (nextNo?: number | undefined) => void;
    refresh: () => void;
    pageNo: number;
    dataList: T[];
    loading: boolean;
}


export const usePageRefresh = <T, ST = any>(props: Omit<IPageRefreshProps<T>, "renderItem">) => {
    const [pageNo, setPageNo] = useState(1);
    const [loading, setLoading] = useState(false);
    const [dataList, setDataList] = useState<T[]>([]);
    const [total, setTotal] = useState(0);
    const [params, setParams] = useState<ST>();
    const _func = (pageNo: number, dataList: T[], params: any) => {
        setLoading(true);
        props.func({ pageNo, pageSize: 10, ...params })
            .then(p => {
                setDataList([...dataList, ...p.data]);
                setTotal(p.total);
            })
            .finally(() => {
                setLoading(false);
            })
    }
    const next = (nextNo?: number) => {
        setLoading(true);
        const _nextNo = nextNo || pageNo + 1;
        setPageNo(_nextNo);
        _func(_nextNo, dataList, params);
    };

    const refresh = (params?: any) => {
        setParams(params);
        setPageNo(1);
        setDataList([])
        _func(1, [], params);
    }
    React.useEffect(() => {
        refresh();
    }, [])

    return {
        total,
        next,
        refresh,
        pageNo,
        dataList,
        loading
    }
}

// | (Omit<IPageRefreshProps<T>, "func"> & { pageRefresh: ReturnType<typeof usePageRefresh> }
// const PageRefresh = <T,>(props: React.PropsWithChildren<IPageRefreshProps<T>>) =>

function PageRefresh<T>(props: React.PropsWithChildren<IPageRefreshProps<T> | (Omit<IPageRefreshProps<T>, "func"> & { pageRefresh: ReturnType<typeof usePageRefresh> })>) {
    const pageRefresh = ((props as any).pageRefresh || usePageRefresh((props as any))) as pageRefresh<T>;
    return (
        <div className="page" >
            <div className="page-content" >
                <div>
                    <List>
                        {pageRefresh.dataList.map(props.renderItem)}
                    </List>
                    {
                        pageRefresh.loading &&
                        <div>
                            <div style={{ display: "flex", justifyContent: "center" }} >
                                {<SpinLoading color='default' />}
                            </div>
                        </div>
                    }
                </div>
            </div>

            <div className="page-p" >
                <Button onClick={pageRefresh.refresh}>
                    刷新
                </Button>
                <Stepper
                    onChange={(val) => {
                        pageRefresh.next(val);
                    }}
                    min={pageRefresh.pageNo}
                    max={Math.ceil(pageRefresh.total / 10)}
                    value={pageRefresh.pageNo} />
            </div>
        </div>
    )
}

export default PageRefresh;
